<template>
  <div @scroll="handleScroll">
    <Red />
    <Swiper />
    <div class="homeDiv1">
      <span>极速送达</span>
      <span>100%亲测</span>
      <span>产地直销</span>
    </div>
    <div class="homeDiv2">
      <img src="./img/newpeople.png" alt="" />
      <div class="circle">Go</div>
    </div>
    <div class="homeNav">
      <Nav />
    </div>
    <One />
    <TimeLimit />
    <Sixten />
    <Pintuan />
    <More :isBottom="isBottom" />
  </div>
</template>

<script>
import Swiper from "./swiper.vue";
import Nav from "./nav.vue";
import Red from "./redbao";
import One from "./part/one.vue";
import TimeLimit from "./part/timeLimit.vue";
import Sixten from "./part/sixten.vue";
import Pintuan from "./part/pintuan.vue";
import More from "./part/more.vue";
export default {
  components: {
    Swiper,
    Nav,
    Red,
    One,
    TimeLimit,
    Sixten,
    Pintuan,
    More,
  },
  data() {
    return {
      isBottom: false,
    };
  },
  methods: {
    handleScroll(e) {
      const { scrollTop, clientHeight, scrollHeight } = e.target;
      // console.log(scrollTop, clientHeight, scrollHeight);
      if (
        scrollTop + clientHeight === scrollHeight ||
        scrollTop + clientHeight >= scrollHeight - 1
      ) {
        this.isBottom = true;
      } else {
        this.isBottom = false;
      }
    },
  },
  created() {
    console.log(this.$store.state, "dddd");
  },
};
</script>

<style scoped>
.homeDiv1 {
  height: 3vh;
  /* background: red; */
  display: flex;
}
.homeDiv1 span {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #666;
  line-height: 3vh;
}
.homeDiv2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: pink; */
  height: 12vh;
}
.homeDiv2 img {
  width: 80vw;
  height: 10vh;
}
.homeNav {
  height: 25vh;
}
div {
  color: #409eff;
}
.circle {
  position: absolute;
  width: 8vw;
  height: 4vh;
  background: white;
  border-radius: 50%;
  animation: zhuan 1s infinite;
  text-align: center;
  line-height: 4vh;
  font-size: 12px;
  border: 1px solid #aaaaaa;
  left: 75vw;
  bottom: 2.5vh;
  transform: translateX(-50%);
}
@keyframes zhuan {
  0% {
    /* transform: rotate(width: 10vw); */
    transform: scale(0.8);
  }
  60% {
    transform: scale(1);
  }
  100% {
    /* transform: rotate(360deg); */
    transform: scale(1.2);
  }
}
</style>